<p style="margin-bottom: 0px">&nbsp;</p>
<nz-spin [nzSpinning]="loading">
<nz-card>
  <nz-tabset [nzTabBarExtraContent]="extraTemplete" (nzSelectChange)="change($event)">
    <nz-tab nzTitle="全部订单"></nz-tab>
    <nz-tab nzTitle="待审批"></nz-tab>
    <nz-tab nzTitle="待面签"></nz-tab>
  </nz-tabset>
  <ng-template #extraTemplete>
    <nz-dropdown >
        <button nz-button nz-dropdown>添加订单<i class="anticon anticon-down"></i></button>
        <ul nz-menu>
          <li nz-menu-item>
            <a (click)="gotoAdd()"><i class="anticon anticon-plus"></i> 添加</a>
          </li>
          <!--<li nz-menu-item>-->
            <!--<a>-->
              <!--<nz-upload [nzAction]="uploadUrl" [nzShowUploadList]="false" nzAccept="application/vnd.ms-excel"-->
                  <!--(nzChange)="uploadProd($event)">-->
                  <!--<i class="anticon anticon-upload"></i> 导入商品-->
              <!--</nz-upload>-->
            <!--</a>-->
          <!--</li>-->
          <!--<li nz-menu-item>-->
            <!--<a down-file [http-data]="data" http-url="assets/tmp/prodimport.xls" file-name="物料模板">-->
              <!--<i class="anticon anticon-download"></i> 下载导入模板-->
            <!--</a>-->
          <!--</li>-->
        </ul>
    </nz-dropdown>

  </ng-template>

  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="8">
        <nz-col nzMd="4" nzSm="24">
            <nz-form-item>
                <nz-form-control>
                    <input type="text" nz-input placeholder="输入客户姓名" [(ngModel)]="q.productCd" name="productCd">
                </nz-form-control>
            </nz-form-item>
        </nz-col>
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <input type="text" nz-input placeholder="输入身份证号" [(ngModel)]="q.productCd" name="productCd">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
        <nz-col nzMd="4" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="brand">产品</nz-form-label>
              <nz-form-control>
                <nz-select [nzPlaceHolder]="'全部产品'" nzAllowClear [(ngModel)]="q.brand" name="brand">
                  <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
        </nz-col>

        <nz-col nzMd="3" nzSm="24">
          <nz-form-item>
            <nz-form-label nzFor="userGroup">代理商</nz-form-label>
            <nz-form-control>
              <nz-select [nzPlaceHolder]="'全部代理商'" nzShowSearch nzAllowClear [(ngModel)]="q.userGroup" name="userGroup">
                  <nz-option [nzLabel]="userGroup.text" [nzValue]="userGroup.value" *ngFor="let userGroup of userGroups"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </nz-col>

        <!-- <nz-col nzMd="3" nzSm="24">
          <nz-form-item>
            <nz-form-label nzFor="proYear">年份</nz-form-label>
            <nz-form-control>
              <nz-select [nzPlaceHolder]="'全部年份'" nzAllowClear nzShowSearch [(ngModel)]="q.year" name="year">
                  <nz-option [nzLabel]="year.text" [nzValue]="year.value" *ngFor="let year of years"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </nz-col> -->
        <!--<nz-col nzMd="3" nzSm="24">-->
            <!--<nz-form-item>-->
              <!--<nz-form-label nzFor="season">身份证</nz-form-label>-->
              <!--<nz-form-control>-->
                <!--<nz-select [nzPlaceHolder]="'全部'" nzAllowClear nzShowSearch [(ngModel)]="q.season" name="season">-->
                    <!--<nz-option [nzLabel]="season.text" [nzValue]="season.value" *ngFor="let season of seasons"></nz-option>-->
                <!--</nz-select>-->
              <!--</nz-form-control>-->
            <!--</nz-form-item>-->
        <!--</nz-col>-->
        <!--<nz-col nzMd="3" nzSm="24">-->
            <!--<nz-form-item>-->
              <!--<nz-form-label nzFor="isAd">广告款</nz-form-label>-->
              <!--<nz-form-control>-->
                <!--<nz-select [nzPlaceHolder]="'全部'" nzAllowClear nzShowSearch [(ngModel)]="q.isAd" name="isAd">-->
                    <!--<nz-option [nzLabel]="isAd.text" [nzValue]="isAd.value" *ngFor="let isAd of isAds"></nz-option>-->
                <!--</nz-select>-->
              <!--</nz-form-control>-->
            <!--</nz-form-item>-->
        <!--</nz-col>-->
        <!--<nz-col nzMd="3" nzSm="24">-->
          <!--<nz-form-item>-->
            <!--<nz-form-label nzFor="isCm">定制款</nz-form-label>-->
            <!--<nz-form-control>-->
              <!--<nz-select [nzPlaceHolder]="'全部'" nzAllowClear nzShowSearch [(ngModel)]="q.isCm" name="isCm">-->
                  <!--<nz-option [nzLabel]="isCm.text" [nzValue]="isCm.value" *ngFor="let isCm of isCms"></nz-option>-->
              <!--</nz-select>-->
            <!--</nz-form-control>-->
          <!--</nz-form-item>-->
        <!--</nz-col>-->
        <nz-col nzMd="3" nzSm="24">
            <button nz-button type="button" [nzType]="'primary'" class="mx-sm" (click)="st.load(1, q)">{{'search' | translate}}</button>
        </nz-col>
    </nz-row>
  </form>
</nz-card>
<!--<div class="d-flex align-items-center" style="margin-bottom: 8px;display: none;">-->
  <!--<div>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="export()"><i class="anticon anticon-export"></i>批量导出商品</button>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="gotoImg()"><i class="anticon anticon-export"></i>批量上传图片</button>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="showPrices(2)"><i class="anticon anticon-pay-circle-o"></i>批量改价</button>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="showUpConfirm()"><i class="anticon anticon-up-circle-o"></i>批量上架</button>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="showUnderConfirm()"><i class="anticon anticon-down-circle-o"></i>批量下架</button>-->
    <!--&lt;!&ndash;<button nz-popconfirm nz-button nzType='default' style="margin-right: 8px" &ndash;&gt;-->
        <!--&lt;!&ndash;[nzTitle]="repdateinput" [nzCondition]="checkedList.length <= 0" &ndash;&gt;-->
        <!--&lt;!&ndash;(nzOnConfirm)="setRepdate()" (nzOnCancel)="cancel()"><i class="anticon anticon-clock-circle-o"></i>批量设置补货日期&ndash;&gt;-->
    <!--&lt;!&ndash;</button>&ndash;&gt;-->
    <!--<nz-dropdown style="margin-right: 8px">-->
      <!--<button nz-button nz-dropdown>上传补货日期<i class="anticon anticon-down"></i></button>-->
      <!--<ul nz-menu>-->
        <!--<li nz-menu-item>-->
          <!--<a>-->
            <!--<nz-upload [nzAction]="uploadDateUrl" [nzShowUploadList]="false" nzAccept="application/vnd.ms-excel"-->
                       <!--(nzChange)="uploadProd($event)">-->
              <!--<i class="anticon anticon-upload"></i> 导入日期-->
            <!--</nz-upload>-->
          <!--</a>-->
        <!--</li>-->
        <!--<li nz-menu-item>-->
          <!--<a down-file [http-data]="data" http-url="assets/tmp/setRepDate.xls" file-name="设置补货日期模板">-->
            <!--<i class="anticon anticon-download"></i> 下载导入模板-->
          <!--</a>-->
        <!--</li>-->
      <!--</ul>-->
    <!--</nz-dropdown>-->
    <!--<ng-template #repdateinput>-->
      <!--<input nz-input [(ngModel)]="repdate" name="repdate" placeholder="输入日期">-->
    <!--</ng-template>-->
    <!--<button [nzLoading]="syncing" [nzTitle]="'上次同步时间  '+lastDate" nz-tooltip nz-button nzType='default' style="margin-right: 8px" (click)="syncStock()">{{syncing ? "库存同步中" : "同步库存"}}</button>-->
  <!--</div>-->
<!--</div>-->


<simple-table #st
    [columns]="columns"
    [data]="url"
    [ps]="ps"
    [extraParams]="q"
    [resReName]="{ total: 'data.total', list: 'data.rows'}"
    [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
    toTopInChange
    [showTotal]="true"
    [showPagination]="true"
    [showSizeChanger]="true"
    (checkboxChange)="checkboxChange($event)"
    >
    <ng-template st-row="img" let-i>
      <span *ngIf="!i.img" style="color: lightgrey; font-size: 12px;">无图片</span>
      <a><img *ngIf="i.img" (click)="showImage(imgSuffix + i.img)" [src]="imgSuffix + i.img" width="32px" style=" max-height: 32px;"/></a>
    </ng-template>

    <ng-template st-row="isCm" let-i>
        {{i.isCm === '0' ? '非定制' : '定制'}}
    </ng-template>
    <ng-template st-row="isAd" let-i>
      {{i.isAd === '0' ? '普通款' : '广告款'}}
    </ng-template>
</simple-table>

<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
  <ng-template #modalContent>
    <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
  </ng-template>
</nz-modal>

<nz-drawer id="drawer" [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
  <p class="title" style=" margin-bottom: 24px;">
    {{selectProd.productCd}}
    <nz-tag [nzColor]="'magenta'">{{selectProd.isAd === '1' ? '广告款' : '普通款'}}</nz-tag>
    <nz-tag [nzColor]="'gold'">{{selectProd.isCm === '1' ? '定制' : '非定制'}}</nz-tag>
    <nz-tag [nzColor]="'blue'">{{selectProd.brandLine}}</nz-tag>
    <nz-tag *ngIf="selectProd.eanCode" [nzColor]="'purple'">{{selectProd.eanCode}}</nz-tag>
  </p>
  <p class="title">基本信息</p>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">SAP:</p> {{selectProd.sap}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">型号:</p> {{selectProd.style}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">色号:</p>{{selectProd.colorCd}}
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">品牌:</p> {{selectProd.brand}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">年份:</p>{{selectProd.year}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">款式:</p>{{selectProd.userGroup}}
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">规格:</p> {{selectProd.spec}}
      </div>
    </div>

    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">分类:</p>{{selectProd.category}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">产品季:</p>{{selectProd.season}}
      </div>
    </div>
  </div>
  <nz-divider style="margin: 12px 0px"></nz-divider>
  <p class="title">价格</p>
  <div nz-row>
      <div nz-col  nzMd="8">
        <number-info subTitle="结算价" [total]="selectProd.tradeDPrice"></number-info>
      </div>
      <div nz-col  nzMd="8">
        <number-info subTitle="批发价" [total]="selectProd.retailDPrice"></number-info>
      </div>
      <div nz-col nzMd="8">
        <number-info subTitle="市场价" [total]="selectProd.marketDPrice"></number-info>
      </div>
  </div>
  <nz-divider style="margin: 12px 0px"></nz-divider>
  <p class="title">库存<small class='text-red'> 补货日期: {{selectProd.repDate ? selectProd.repDate : '未设置'}}</small></p>
  <div nz-row>
      <div nz-col  nzMd="8">
        <number-info subTitle="总部库存" [total]="selectProd.yrStock"></number-info>
      </div>
      <div nz-col  nzMd="8">
        <number-info subTitle="总部库存(sap)" [total]="selectProd.yrStockSap"></number-info>
      </div>
      <div nz-col nzMd="8">
        <number-info subTitle="直营库存(sap)" [total]="selectProd.zyStockSap" ></number-info>
      </div>
  </div>
  <div nz-row>
      <div nz-col  nzMd="8">
        <number-info subTitle="KA库存(sap)" [total]="selectProd.kaStockSap"></number-info>
      </div>
      <div nz-col nzMd="8">
        <number-info subTitle="电零库存(sap)" [total]="selectProd.dlStockSap" ></number-info>
      </div>
      <div nz-col nzMd="8">
        <number-info subTitle="国贸库存(sap)" [total]="selectProd.gmStockSap" ></number-info>
      </div>
  </div>
  <nz-divider></nz-divider>
  <p class="title">其它</p>
  <div nz-row>
      <div nz-col nzSpan="8">
        <div class="item-wrap">
          <p class="label">镜框材质:</p> {{selectProd.pfTexture}}
        </div>
      </div>
      <div nz-col nzSpan="8">
        <div class="item-wrap">
          <p class="label">镜片材质:</p> {{selectProd.lensTexture}}
        </div>
      </div>
      <div nz-col nzSpan="8">
        <div class="item-wrap">
          <p class="label">镜腿材质:</p> {{selectProd.templeTexture}}
        </div>
      </div>
  </div>
  <div nz-row>
      <div nz-col nzSpan="8">
        <div class="item-wrap">
          <p class="label">镜框颜色:</p> {{selectProd.colorSpec}}
        </div>
      </div>
      <div nz-col nzSpan="8">
        <div class="item-wrap">
          <p class="label">镜片颜色:</p> {{selectProd.lensSpec}}
        </div>
      </div>
      <div nz-col nzSpan="8">
        <div class="item-wrap">
          <p class="label">镜腿颜色:</p> {{selectProd.templeSpec}}
        </div>
      </div>
  </div>
</nz-drawer>
</nz-spin>
